
<!-- 双折线统计 -->
<template>
  <div ref="chart" style="width: 800px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";

export default {
  name: "AreaChart",
  setup() {
    const chart = ref(null);
    let myChart = null;

    // Default data for the two series (approximated based on the image)
    const months = [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
    ];
    const selfUnitData = [200, 300, 200, 400, 600, 800, 500, 700, 400]; // 自有单位 (blue line)
    const otherUnitData = [150, 250, 150, 300, 400, 500, 300, 400, 200]; // 其他单位 (yellow line)

    // Initialize the chart
    const initChart = () => {
      myChart = echarts.init(chart.value);

      const option = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            const month = params[0].name;
            const seriesName = params[0].seriesName;
            const value = params[0].value;
            return `${month}<br/>${seriesName}: ${value} 在线数量`;
          },
        },
        legend: {
          data: ["自有单位", "其他单位"],
          top: "0%",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: months,
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "数量",
          max: 1000,
          axisLabel: {
            color: "#fff",
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#444",
            },
          },
        },
        series: [
          {
            name: "自有单位",
            type: "line",
            areaStyle: {
              opacity: 0.5,
            },
            data: selfUnitData,
            smooth: true,
            lineStyle: {
              color: "#87cefa",
            },
            itemStyle: {
              color: "#87cefa",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(135, 206, 250, 0.5)" },
                { offset: 1, color: "rgba(135, 206, 250, 0)" },
              ]),
            },
          },
          {
            name: "其他单位",
            type: "line",
            areaStyle: {
              opacity: 0.5,
            },
            data: otherUnitData,
            smooth: true,
            lineStyle: {
              color: "#ff7f50",
            },
            itemStyle: {
              color: "#ff7f50",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(255, 127, 80, 0.5)" },
                { offset: 1, color: "rgba(255, 127, 80, 0)" },
              ]),
            },
          },
        ],
      };

      myChart.setOption(option);
    };

    onMounted(() => {
      initChart();
    });

    onUnmounted(() => {
      if (myChart) {
        myChart.dispose();
      }
    });

    return { chart };
  },
};
</script>

<style scoped>
/* Add any custom styles if needed */
</style>
